<template>
  <div class="report-form-content">
    <van-steps direction="vertical" :active="approveOrderOperList.length - 1">
      <van-step
        v-for="(item, index) in approveOrderOperList"
        :key="index"
        center
      >
        <text class="mx-1">{{ item.title }}<span v-if="item.isCountersign === '1'">(会签)</span></text>
          <div class="" v-if="item.approveOrderOperType === '1'">
            <div class="shenpilist">
              <label>操作类型：</label>
              <span><EnumTag :enum-list="getEnumList('ApproveOrderOperType')" :enum-key="item.approveOrderOperType" /></span>
            </div>
            <div class="shenpilist">
              <label>操作人：</label>
              <span><LabelTag :foreignList="userList" :foreign-ids="item['currentApproveUserId']" :foreign-label="'name'" /></span>
            </div>
          </div>
          <div class="" v-if="item.approveOrderOperType !== '1'">
            <div class="shenpilist">
              <label>操作类型：</label>
              <span><EnumTag :enum-list="getEnumList('ApproveOrderOperType')" :enum-key="item.approveOrderOperType" /></span>
            </div>
            <div class="shenpilist">
              <label>审批类型：</label>
              <span><EnumTag :enum-list="getEnumList('ApproveNodeType')" :enum-key="item.approveNodeType" /></span>
            </div>
            <div class="shenpilist"  v-if="item.approveNodeType === '1'">
              <label>审批组织架构：</label>
              <span><LabelTag :foreignList="organizationList" :foreign-ids="item['currentApproveIds']" :foreign-label="'organizationName'" /></span>
            </div>
            <div class="shenpilist"  v-else-if="item.approveNodeType === '2'">
              <label>审批人：</label>
              <span><LabelTag :foreignList="userList" :foreign-ids="item['currentApproveIds']" :foreign-label="'name'" /></span>
            </div>
            <div class="shenpilist"  v-else-if="item.approveNodeType === '3'">
              <label>审批角色：</label>
              <span><LabelTag :foreignList="roleList" :foreign-ids="item['currentApproveIds']" :foreign-label="'roleName'" /></span>
            </div>
          </div>
          <div class="">
            <div class="shenpilist" v-if="item.approveResult !== null">
              <label>审批结果：</label>
              <span><EnumTag :enum-list="getEnumList('ApproveResult')" :enum-key="item.approveResult" /></span>
            </div>
            <div class="shenpilist" v-if="item.approveOpinion !== null">
              <label>审批意见：</label>
              <span>{{ item.approveOpinion }}</span>
            </div>
            <div class="shenpilist" v-if="item.approveOrderOperType === '2' && item.signImg">
              <label>审批签名：</label>
              <span><img :src="item.signImg" alt="" width="100" height="40" /></span>
            </div>
          </div>
      </van-step>
    </van-steps>
    <!-- <el-scrollbar max-height="500px">
      <van-steps direction="vertical" :active="0">
        <van-step
          v-for="(item, index) in approveOrderOperList"
          :key="index"
          :timestamp="item.timestamp"
          :color="item.color"
          :hollow="item.hollow"
        >

        </van-step>
      </van-steps>
    </el-scrollbar> -->
  </div>
</template>
<script setup>
import {doGet} from "@/config/http"
import {svc, getListPageSize, isNullOrUndefinedOrEmpty, getEnumList} from '@/config/common'
import {ref, watch} from "vue"
import initListStore from '@/store/modules/initList'

const props = defineProps({
  businessType: {
    type: String,
    default: null,
  },
  businessId: {
    type: String,
    default: null,
  },
})

const icon = ref('el-icon-check')
const color = ref('')

const userList = initListStore().userList
const organizationList = initListStore().organizationList
const roleList = initListStore().roleList

const approveOrderOperList = ref([])

watch(() => [props.businessType, props.businessId], async vals => {
  approveOrderOperList.value = []
  let bt = vals[0]
  let bi = vals[1]
  if (isNullOrUndefinedOrEmpty(bt) || isNullOrUndefinedOrEmpty(bi)) {
    return;
  }
  // let p1 = doGet(svc, '/user/page', {pageSize: getListPageSize()}, true)
  // let p2 = doGet(svc, '/organization/page', {pageSize: getListPageSize()}, false)
  // let p3 = doGet(svc, '/role/page', {pageSize: getListPageSize()}, false)
  // let resArray = await Promise.all([p1, p2, p3])
  // userList.value = resArray[0]['records']
  // organizationList.value = resArray[1]['records']
  // roleList.value = resArray[2]['records']
  let param = {
    businessType: bt,
    businessId: bi,
  }
  approveOrderOperList.value = await doGet(svc, '/customApprove/queryApproveOrderOper', param, false)
  approveOrderOperList.value.map(async item => {
    if (item['approveOrderOperType'] === '2' && !isNullOrUndefinedOrEmpty(item['approveResult'])) {
      let r = await doGet(svc, `/custom/getSignImg/${item.currentApproveUserId}`, {}, false)
      if (r) {
        item.signImg = 'data:image/gif;base64,' + r
      }
    }
  })
  approveOrderOperList.value.reverse()
},{immediate:true})
</script>
<style scoped>
.mx-1 {
  font-size: 18px;
  font-weight: bold;
}
.scrollbar-demo-item {
  margin: 0 50px;
  border-radius: 4px;
}
.margin-0 {
  margin: 1px 0;
  border-bottom: 1px dashed #ccc;
}
.margin-0 div {
  margin-right: 20px;
}
.shenpilist {
  padding: .625rem 0;
}
</style>
